<script setup lang="ts">
import { reactive } from 'vue'
import ExampleA from './ExampleA.vue'
import ExampleB from './ExampleB.vue'
import { modal, notify, nextKey } from '@/widgets'
import { sleep } from '@/common'

function showModalA() {
  const m = modal.create({
    component: ExampleA,
    props: {
      name: 'A'
    },
    events: {
      action() {
        m?.destroy()
      }
    }
  })
}

function showModalAWithTime() {
  const props = reactive({
    name: 'A'
  })
  const changeName = () => {
    const name = nextKey()
    props.name = name
    notify.info({ content: `Name: ${name}`, title: 'change' })
  }
  modal.create({
    component: ExampleA,
    props,
    events: {
      action: changeName
    }
  })
}

function showModalB() {
  modal.create({
    component: ExampleB,
    props: {
      name: 'B'
    }
  })
}

async function showLoadingScreen() {
  const t0 = Date.now()
  async function beforeCancel() {
    const now = Date.now()
    const dt = 8 - Math.floor((now - t0) / 1000)
    if (dt > 0) {
      notify.error({ content: `${dt}s之后才能关闭` })
      return false
    }
    return true
  }

  const m = modal.loadingScreen({
    message: '大家好:20s',
    beforeCancel
  })

  for (let i = 0; i < 20; i++) {
    await sleep(1000)
    const now = Date.now()
    const dt = 20 - Math.floor((now - t0) / 1000)
    if (dt > 0) {
      m.updateMessage(`大家好:${dt}s`)
    } else {
      m.updateMessage('大家好:0s')
      break
    }
  }
  m.destroy()
}

const opts = {
  title: '背影',
  content:
    '我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！',
  onPositive: () => {
    notify.success({ content: 'Yes!!' })
  },
  onNegative() {
    notify.warn({ content: 'No!' })
  }
}

const opts1 = {
  title: '背影',
  contentHtml: `<p>&emsp;&emsp;我与<strong>父亲</strong>不相见已<span style="color:#f00;">二年余</span>了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！</p>
  <p>&emsp;&emsp;回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
  <p>&emsp;&emsp;到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p>
  `,
  onPositive: () => {
    notify.success({ content: 'Yes!!' })
  },
  onNegative() {
    notify.warn({ content: 'No!' })
  }
}

async function showConfirmExample() {
  const ok = await modal.confirm({
    title: '警告',
    content: '你确定?',
    positiveText: 'Yes!!',
    negativeText: 'No!'
  })
  if (ok) {
    notify.success({ content: 'Yes!!' })
  } else {
    notify.warn({ content: 'No!' })
  }
}
</script>
<template>
  <div class="modal-example pane-block">
    <button class="button" @click="showModalA">modal-a-close</button>
    <button class="button" @click="showModalAWithTime">change-name</button>
    <button class="button" @click="showLoadingScreen">loading-screen</button>
    <button class="button" @click="showModalB">modal-b</button>
    <button class="button is-light" @click="modal.message(opts)">message</button>
    <button class="button is-primary" @click="modal.info(opts)">info</button>
    <button class="button is-success" @click="modal.success(opts)">success</button>
    <button class="button is-warning" @click="modal.warn(opts)">warn</button>
    <button class="button is-danger" @click="modal.error(opts)">error</button>
    <button class="button is-warning" @click="showConfirmExample">confirm</button>
    <button class="button is-primary" @click="modal.info(opts1)">content-html</button>
  </div>
</template>
<style lang="scss">
.modal-example {
  display: flex;
  flex-direction: column;
  .modal-example-title {
    margin-bottom: 1em;
  }
  .button:not(:last-child) {
    margin-bottom: 1em;
  }
}
</style>
